<script lang="ts" setup>
  import { getDeviceModels, getDeviceEvents } from '@/api-new/devices';
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import { Modal } from '@arco-design/web-vue';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';

  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import AlarmHandlingModal from './alarm-handling-modal.vue';

  const modelSelect = useSelectOption({
    apiFun: getDeviceModels,
    fieldNames: {
      value: 'modelId',
      label: 'modelName',
    },
    name: '设备型号',
  });
  // 定义表格列

  /**
   *
  "deviceCode": "string",
  "deviceName": "string",
  "modelName": "string",
  "elderName": "string",
  "elderPhone": "string",
  "eventName": "string",
  "eventTime": "string",
  "disposeStatus": "string",
  "disposeUserName": "string",
  "disposeTime": "string"
   */
  const columns = [
    {
      title: '设备编码',
      dataIndex: 'deviceCode',
      width: '200',
    },
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      width: '180',
    },
    {
      title: '设备型号',
      dataIndex: 'modelName',
      width: '180',
    },
    {
      title: '绑定长者',
      dataIndex: 'elderName',
      width: '180',
    },
    {
      title: '长者手机号码',
      dataIndex: 'elderPhone',
      width: '200',
    },
    {
      title: '呼叫/告警类型',
      dataIndex: 'eventName',
      width: '180',
    },
    {
      title: '呼叫/告警时间',
      dataIndex: 'eventTime',
      width: '180',
    },
    {
      title: '是否接通',
      dataIndex: 'disposeStatus',
      width: '120',
    },
    {
      title: '处理状态',
      dataIndex: 'disposeStatus',
      width: '120',
    },
    {
      title: '处理人',
      dataIndex: 'disposeUserName',
      width: '120',
    },
    {
      title: '处理时间',
      dataIndex: 'disposeTime',
      width: '180',
    },
    {
      title: '操作',
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
      fixed: 'right',
    },
  ];

  const page = usePageTable({
    searchForm: {
      state: {
        /**
         * 设备名称
         */
        deviceName: '',
        /**
         * 设备编码
         */
        deviceSn: '',
        /**
         * 设备型号ID
         */
        modelId: '',
        /**
         * 处理状态
         */
        disposeStatus: undefined,
        /**
         * 长者姓名
         */
        elderName: '',
        /**
         * 长者手机号
         */
        elderPhone: '',
        /**
         * 结束时间，格式: yyyy-MM-dd HH:mm:ss
         */
        endTime: '',
        /**
         * 告警类型
         */
        eventName: '',
      },
    },
    table: {
      apiFun: getDeviceEvents,
      columns,
    },
  });

  const handler = useModeModalHandler({
    onSuccess() {
      page.reload();
    },
  });

  const scroll = {
    x: 2080,
  };

  const showHandlerContent = (record: any) => {
    Modal.warning({
      title: '处理信息',
      content: '已经处理了。。。',
      hideCancel: true,
    });
  };
</script>

<template>
  <div class="flex flex-col">
    <TableLayout
      :scroll="scroll"
      :scrollbar="true"
      :create="false"
      v-bind="page.bindProps"
    >
      <template #searchForm="{ state }">
        <a-form-item field="modelId" label="设备型号">
          <a-select
            v-model="state.modelId"
            v-bind="modelSelect.bindProps"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="deviceSn" label="设备编码">
          <a-input
            v-model="state.deviceSn"
            placeholder="请输入设备编码"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="deviceName" label="设备名称">
          <a-input
            v-model="state.deviceName"
            placeholder="请输入设备名称"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="eventName" label="告警类型">
          <a-input
            v-model="state.eventName"
            placeholder="请输入告警类型"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="elderName" label="长者姓名">
          <a-input
            v-model="state.elderName"
            placeholder="请输入长者姓名"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="elderPhone" label="手机号码">
          <a-input
            v-model="state.elderPhone"
            placeholder="请输入手机号码"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="village" label="是否接通">
          <a-select
            v-model="state.village"
            placeholder="请选择是否接通"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="disposeStatus" label="处理状态">
          <a-select
            v-model="state.disposeStatus"
            placeholder="请选择处理状态"
            allow-clear
          />
        </a-form-item>
      </template>

      <template #action="{ record }">
        <a-space>
          <a-button
            v-if="record.disposeStatus === '已处理'"
            size="small"
            type="text"
            @click="handler.showDetail(record)"
          >
            查看处理信息
          </a-button>

          <a-button
            v-else
            size="small"
            type="text"
            @click="handler.showAdd(record)"
          >
            处理
          </a-button>
        </a-space>
      </template>
    </TableLayout>

    <!-- 编辑弹窗 -->
    <AlarmHandlingModal v-bind="handler.bindProps" />
  </div>
</template>
